<template>
    <div id="cartControl">
        <transition name="move">
            <div class="cart-decrease icon-remove_circle_outline" v-show="food.count" @click.stop.prevent="decreaseCart"></div>
        </transition>
        <div class="cart-count" v-show="food.count">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="increaseCart">
            <i class="bg"></i>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'

    export default {
        name: 'CartControl',
        props: ['food'],
        data() {
            return {
                // 
            }
        },
        methods: {
            decreaseCart() {
                if (this.food.count) this.food.count--;
            },
            increaseCart() {
                this.food.count ? this.food.count++ : Vue.set(this.food, 'count', 1);
            }
        }
    }
</script>

<style scoped>
    #cartControl {
        font-size: 0;
    }
    
    #cartControl .cart-decrease {
        display: inline-block;
        width: 26px;
        height: 26px;
        font-size: 26px;
        color: #b4b4b4;
        cursor: pointer;
    }
    
    #cartControl .cart-add .bg {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: black;
        position: absolute;
        left: 3px;
        top: 3px;
        z-index: -1;
    }
    
    #cartControl .cart-count {
        display: inline-block;
        width: 25px;
        text-align: center;
        font-size: 12px;
        line-height: 26px;
        vertical-align: top;
    }
    
    #cartControl .cart-add {
        display: inline-block;
        width: 26px;
        height: 26px;
        font-size: 26px;
        color: #ffd161;
        position: relative;
        cursor: pointer;
    }
    
    .move-enter-active,
    .move-leave-active {
        transition: all .3s ease;
    }
    
    .move-enter,
    .move-leave-to {
        transform: translateX(20px) rotate(-180deg);
    }
</style>